<template>
  <div class="friend_item">
    <div class="left_avatar hidden-xs-only cursor_class">
      <img :src="item.user.avatarUrl" alt="" @click="router.push('/user-home/' + item.user.userId)">
    </div>
    <div class="right_content">
      <div class="top_info">
        <div>
          <el-link type="primary" :href="'/user-home/' + item.user.userId">{{ item.user.nickname }}</el-link>
          <div class="time">{{ dayjs(item.eventTime).format('MM月DD日 hh:mm') }}</div>
        </div>
        <el-button type="primary" @click="eventDel(item.id)" v-if="item.user.userId === userInfo.userId">删除</el-button>
      </div>
      <div class="bottom_content">
        <eventContent :item="item">
          <template #event v-if="item.json.event">
            <eventContent :item="item.json.event" class="event_content">
              <template #header>
                <el-link type="primary" style="vertical-align: baseline;" :href="'/user-home/' + item.json.event.user.userId">@{{ item.json.event.user.nickname }}</el-link>
                {{ item.json.event.type === 19 ? '&nbsp;&nbsp;分享专辑' : item.json.event.type === 18 ? '&nbsp;&nbsp;分享单曲' : '' }}：
              </template>
            </eventContent>
          </template>
        </eventContent>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as friendApi from '@/api/friend'
import eventContent from "@/components/EventContent/index"
import { ElMessageBox } from 'element-plus'
import dayjs from "dayjs";
import { useRouter } from 'vue-router'
import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()
const router = useRouter()
const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const emit = defineEmits(['getData'])
const userInfo = ref({})
// 删除动态
const eventDel = async (id: number) => {
  ElMessageBox.confirm('确定要删除该动态吗？', '提示' ,{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      try {
        let cookie = localStorage.getItem('cookie')
        await friendApi.del({ evId: id, cookie })
        emit('getData')
      } catch (error) {
        console.log(error);
      }
    } catch (error) {
      console.log(error);
    }
  }).catch(() => {
    
  })
}
userInfo.value = proxy.$getUserInfo()
</script>
<style lang="scss" scoped>
.friend_item {
  display: flex;
  border-bottom: 1px solid #e8e8e9;
  padding: 20px 0;

  .left_avatar {
    width: 45px;
    height: 45px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .right_content {
    padding-left: 10px;
    flex: 1;

    .top_info {
      display: flex;
      justify-content: space-between;
      .time {
        color: #999;
        font-size: 12px;
        margin-top: 10px;
      }
    }

    .bottom_content {}
  }
}
.event_content {
  background: #f0eded;
  padding: 5px 10px 10px 10px;
}
</style>
